<template>
    <div>
        <BasicModal v-bind="$attrs" @register="register" title="导入EXCEL" :width="600" @cancel="handleClose" :confirmLoading="uploading" destroyOnClose>
            <!--是否校验-->
            <div style="margin: 0 5px 1px" v-if="online">
                <span style="display: inline-block;height: 32px;line-height: 32px;vertical-align: middle;">是否开启校验:</span>
                <span style="margin-left: 6px">
                   <a-switch :checked="validateStatus==1" @change="handleChangeValidateStatus" checked-children="是" un-checked-children="否" size="small"/>
                </span>
            </div>
            <!--上传-->
            <a-upload name="file" accept=".xls,.xlsx" :multiple="true" :fileList="fileList" :remove="handleRemove" :beforeUpload="beforeUpload">
                <a-button preIcon="ant-design:upload-outlined">选择导入文件</a-button>
            </a-upload>
            <!--页脚-->
            <template #footer>
                <a-button @click="handleClose">关闭</a-button>
                <a-button type="primary" @click="handleImport" :disabled="uploadDisabled" :loading="uploading">{{ uploading ? '上传中...' : '开始上传' }}</a-button>
            </template>
        </BasicModal>
    </div>
</template>

<script lang="ts">
    import {defineComponent, ref, unref, watchEffect, computed} from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import {useAttrs} from '/@/hooks/core/useAttrs';
    import {defHttp} from '/@/utils/http/axios';
    import {useGlobSetting} from '/@/hooks/setting';
    import {useMessage} from '/@/hooks/web/useMessage';

    export default defineComponent({
        name: 'JImportModal',
        components: {
            BasicModal,
        },
        props: {
            url: {
                type: String,
                default: '',
                required: false
            },
            biz: {
                type: String,
                default: '',
                required: false
            },
            //是否online导入
            online: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        emits: ['ok','register'],
        setup(props, {emit, refs}) {
            const {createMessage, createWarningModal} = useMessage();
            //注册弹框
            const [register, {closeModal}] = useModalInner((data) => {
                reset(data);
            });
            const glob = useGlobSetting();
            const attrs = useAttrs();
            const uploading = ref(false);
            //文件集合
            const fileList = ref([]);
            //上传url
            const uploadAction = ref('');
            const foreignKeys = ref('');
            //校验状态
            const validateStatus = ref(0);
            const getBindValue = Object.assign({}, unref(props), unref(attrs));
            //监听url
            watchEffect(() => {
                props.url && (uploadAction.value = `${glob.uploadUrl}${props.url}`);
            });
            //按钮disabled状态
            const uploadDisabled = computed(() => !(unref(fileList).length > 0));

            //关闭方法
            function handleClose() {
                closeModal() && reset()
            }

            //校验状态切换
            function handleChangeValidateStatus(checked) {
                validateStatus.value = !!checked ? 1 : 0;
            }

            //移除上传文件
            function handleRemove(file) {
                const index = unref(fileList).indexOf(file);
                const newFileList = unref(fileList).slice();
                newFileList.splice(index, 1);
                fileList.value = newFileList
            }

            //上传前处理
            function beforeUpload(file) {
                fileList.value = [...unref(fileList), file];
                return false;
            }

            //文件上传
            function handleImport() {
                let {biz, online} = props;
                const formData = new FormData();
                if (biz) {
                    formData.append('isSingleTableImport', biz);
                }
                if (unref(foreignKeys) && unref(foreignKeys).length > 0) {
                    formData.append('foreignKeys', unref(foreignKeys));
                }
                if (!!online) {
                    formData.append('validateStatus', unref(validateStatus));
                }
                unref(fileList).forEach((file) => {
                    formData.append('files[]', file);
                });
                uploading.value = true;

                //TODO 请求怎样处理的问题
                  let headers={
                    'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
                  }
                defHttp.post({url: props.url,params:formData,headers},{isTransformResponse:false}).then((res) => {
                    uploading.value = false;
                    if (res.success) {
                        if (res.code == 201) {
                            errorTip(res.message, res.result)
                        } else {
                            createMessage.success(res.message)
                        }
                        handleClose();
                        reset();
                        emit('ok')
                    } else {
                        createMessage.warning(res.message)
                    }
                })
            }

            //错误信息提示
            function errorTip(tipMessage, fileUrl) {
                let href = glob.uploadUrl + fileUrl;
                createWarningModal({
                    title: '导入成功,但是有错误数据!',
                    centered: false,
                    content: `<div>
                        <span>${tipMessage}</span><br/>
                        <span>具体详情请<a href = ${href} target="_blank"> 点击下载 </a> </span>
                      </div>`
                })
            }

            //重置
            function reset(arg?) {
                fileList.value = [];
                uploading.value = false;
                foreignKeys.value = arg;
                validateStatus.value = 0
            }

            return {
                register,
                getBindValue,
                uploadDisabled,
                fileList,
                uploading,
                validateStatus,
                handleClose,
                handleChangeValidateStatus,
                handleRemove,
                beforeUpload,
                handleImport,
            };
        },
    });
</script>
